<template>
    <div>
        <p>原来的样子: {{ msg }}</p>
        <!-- 2. 过滤器使用
				语法: {{ 值 | 过滤器名字 }}
				-->
        <p>使用翻转过滤器: {{ msg|reverse }}</p>
        <p :title="msg|upper">鼠标长停</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello, Vue'
        }
    },
    // 方式2: 局部 - 过滤器
    // 只能在当前vue文件内使用
    /*
	 语法:
	 filters: {
		 过滤器名字 (val) {
			 return 处理后的值
		 }
	 }
    */
    filters: {
        upper(val) {
            return val.toUpperCase()
        }
    }
}
</script>

<style>

</style>
